<template>
    <div>
         <el-cascader
            v-model="currentSelectedCategoryDTO"
            :options="categoryDTOList"
            :props = "defaultProps"
            @change="categoryDTOChange">
        </el-cascader>
        <br>
      <div v-show="showSpuForm==false && showSkuForm==false">
        <div style="margin-bottom:10px;">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSpu()">添加SPU</el-button>
        </div>
        <el-table
            :data="spuList"
            element-loading-text="数据正在加载......"
            border
            fit
            highlight-current-row>
            <el-table-column label="SPU ID" width="100">
            <template slot-scope="scope">
                {{ scope.row.id }}
            </template>
            </el-table-column>
            <el-table-column label="商品名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.spuName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="商品描述">
            <template slot-scope="scope">
                <span>{{ scope.row.description }}</span>
            </template>
            </el-table-column>

            <el-table-column label="品牌ID">
                <template slot-scope="scope">
                    <span>{{ scope.row.tmId }}</span>
                </template>
            </el-table-column>
            <el-table-column label="品牌">
                <template slot-scope="scope">
                    <span>{{ scope.row.tmName }}</span>
                </template>
            </el-table-column>

            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <el-button @click="deleteSpu(scope.row.id)" type="text" size="small">删除</el-button>
                    <el-button type="primary" size="mini" icon="el-icon-plus" 
                            @click="addSku(scope.row.id, scope.row.spuName, scope.row.tmId,scope.row.tmName)">添加SKU</el-button>
                </template>
            </el-table-column>
        </el-table>
            <!-- 分页组件 -->
        <el-pagination
            :current-page.sync="pageNo"
            :total="total"
            :page-size.sync="pageSize"
            :page-sizes="[2, 4, 6, 8]"
            style="padding: 30px 0; text-align: center;"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            @current-change="getSpuInfoPage"
            @size-change="getSpuInfoPage"
        />
        </div>

        <spuForm v-show="showSpuForm==true" 
            ref="refSpuForm"  
            @saveSpuInfoSuccessEvent="saveSpuInfoSuccess"
            @clickBackToSpuListEvent="backToSpuList">
            
        </spuForm>

        <skuForm v-show="showSkuForm==true" 
            ref="refSkuForm"  
            @saveSkuInfoSuccessEvent="saveSkuInfoSuccess"
            @backToSpuList="backToSpuList">
        </skuForm>
    </div>
</template>

<script>
import * as spuApi from '../../api/gmall/product/spu'
import * as categoryApi from '../../api/gmall/product/category'

import spuForm from '@/gmall/product/components/SpuForm.vue'
import skuForm from '@/gmall/product/components/SkuForm.vue'
export default {
    components:{
        spuForm,skuForm
    },
    data(){
        return{
            currentSelectedCategoryDTO:[],
            categoryDTOList:[],
            defaultProps: {
                children: 'children',
                label: 'name',
                value:'id'
            },
            pageNo:1,
            pageSize:2,
            spuList:[],
            total:0,
            showSpuForm:false,
            showSkuForm:false
        }
    },
    methods:{
        findBaseCatgoryDTOTree(){
            categoryApi.findBaseCatgoryDTOTree().then(res=>{
                if(res.data.ok){
                    this.categoryDTOList = res.data.data;
                }
            })
        },
        categoryDTOChange(){
            this.getSpuInfoPage()
            console.log("--------------")
        },
        getSpuInfoPage(){
            let category3id = this.currentSelectedCategoryDTO[2]
            spuApi.selectPage(this.pageNo,this.pageSize,category3id).then(res=>{
                if(res.data.ok){
                    this.spuList = res.data.data.records;
                    this.total = res.data.data.total;
                }
            })
        },
        addSpu(){
            this.showSpuForm = true;
            let category3id = this.currentSelectedCategoryDTO[2];
            console.log(this.$refs['refSpuForm'])//子组件的对象
            this.$refs['refSpuForm'].init(category3id);//document.getElementById("refSpuForm")
        },
        backToSpuList(val){
            this.showSpuForm = false;//展示列表
            this.showSkuForm = false;//展示列表
        },
        saveSpuInfoSuccess(){
            this.showSpuForm = false;//展示列表
            this.getSpuInfoPage();
        },
        deleteSpu(spuId){

        },
        addSku(spuId,spuName,tmId,tmName){
            this.showSkuForm = true;
            //spuId,spuName,tmId,tmName,category3Id
            let category1Id = this.currentSelectedCategoryDTO[0];
            let category2Id = this.currentSelectedCategoryDTO[1];
            let category3Id = this.currentSelectedCategoryDTO[2];
            this.$refs['refSkuForm'].init(spuId,spuName,tmId,tmName,category1Id,category2Id,category3Id)
        },
        saveSkuInfoSuccess(){

        }
    },
    mounted(){
        this.findBaseCatgoryDTOTree();
    }
}
</script>

